<nz-table
  #nzTable
  [nzData]="designs"
  [nzSize]="nzSize"
  nzFrontPagination="false"
>
  <thead>
    <tr>
      <th nzWidth="4em" nzShowExpand></th>
      <th>Name</th>
      <th nzWidth="10em">Quantity</th>
    </tr>
  </thead>
  <tbody>
    <ng-template
      ngFor
      let-data
      [ngForOf]="nzTable.data"
      [ngForTrackBy]="getDesignId"
      let-i="index"
    >
      <tr *ngIf="isEnemy || getQuantity(data, i) > 0">
        <td nzShowExpand [(nzExpand)]="mapOfExpandData[data.id]"></td>
        <td class="name-link" [routerLink]="'/des/edit/' + data.id">
          {{ data.name }}
        </td>
        <td>
          {{ getQuantity(data, i) | number: "1.0-0" }}
        </td>
      </tr>
      <tr [nzExpand]="mapOfExpandData[data.id]">
        <app-design-detail [data]="data"></app-design-detail>
      </tr>
    </ng-template>
    <tr *ngIf="isEnemy && enemy && enemy.antiMissiles.gt(0)">
      <td></td>
      <td nz-tooltip nzTooltipTitle="One Anti Missile block one nuke.">
        Anti Missiles
      </td>
      <td class="monospace">{{ getAntiMissiles() | format: true }}</td>
    </tr>
  </tbody>
</nz-table>
